<!-- 为出库、入库页面准备的组件 -->
<!-- 普通类型的见ListForm -->

<script setup lang="ts">
import Card from "../Card/index.vue";
import { textValue } from "@/utils/index";
import { cloneDeep } from "lodash-es";
import blank from "@/static/images/blank.png";

type valueType = {
	mainOrderNumber: string | number;
	packageNumber: number;
	allPackageNumber?: number;
	weight: number | string;
	transportationRoute: string;
	trap?: number;
	allTrapNumber?: number;
};

const uiConfig = {
	labelSpan: 7,
	valueSpan: 17,
};

const props = defineProps<{
	title: string;
	value: valueType[];
	type?: "show" | "edit";
	numberText?: string;
}>();
const emits = defineEmits(["update:value"]);

const handleChangeNumber = (value: number, index: number, key: string) => {
	if (value < 0) {
		return;
	}
	const oldVal = cloneDeep(props.value);
	const _current = oldVal[index];
	_current[key] = value;

	emits("update:value", oldVal);
};

const selectAllNumber = (value: number, index: number, key: string) => {
	if (!value || value === 0) {
		return;
	}
	handleChangeNumber(value, index, key);
};
</script>

<template>
	<Card class="storage-card-container">
		<view class="title mb-30">{{ props.title }}</view>

		<template v-if="props.value.length > 0">
			<view
				class="storage-list-item"
				v-for="(item, index) in props.value"
				:key="item.mainOrderNumber"
			>
				<wd-row class="row">
					<wd-col :span="uiConfig.labelSpan">主单号</wd-col>
					<wd-col class="ellipsis-1" :span="uiConfig.valueSpan">{{
						textValue(item.mainOrderNumber)
					}}</wd-col>
				</wd-row>
				<wd-row class="row">
					<wd-col :span="uiConfig.labelSpan">{{
						props.numberText ?? "包装数量"
					}}</wd-col>
					<wd-col :span="uiConfig.valueSpan">
						<template v-if="props.type && props.type === 'show'">
							<wd-col class="ellipsis-1" :span="uiConfig.valueSpan">{{
								textValue(item.packageNumber)
							}}</wd-col>
						</template>
						<template v-else>
							<wd-input-number
								:modelValue="item.packageNumber"
								@update:modelValue="
									(v) => handleChangeNumber(v, index, 'packageNumber')
								"
								:min="0"
							/>
							<wd-button
								class="all-btn"
								type="primary"
								size="small"
								:round="false"
								@click="
									() =>
										selectAllNumber(
											item.allPackageNumber,
											index,
											'packageNumber',
										)
								"
								>选择全部</wd-button
							>
						</template>
					</wd-col>
				</wd-row>
				<wd-row class="row">
					<wd-col :span="uiConfig.labelSpan">重量</wd-col>
					<wd-col :span="uiConfig.valueSpan">{{
						textValue(item.weight)
					}}</wd-col>
				</wd-row>
				<wd-row class="row">
					<wd-col :span="uiConfig.labelSpan">运输路线</wd-col>
					<wd-col :span="uiConfig.valueSpan">{{
						item.transportationRoute
					}}</wd-col>
				</wd-row>
				<wd-row class="row">
					<wd-col :span="uiConfig.labelSpan">托盘</wd-col>
					<wd-col :span="uiConfig.valueSpan">
						<template v-if="props.type && props.type === 'show'">
							<wd-col :span="uiConfig.valueSpan">{{ item.trap }}</wd-col>
						</template>
						<template v-else>
							<wd-input-number
								:modelValue="item.trap"
								@update:modelValue="(v) => handleChangeNumber(v, index, 'trap')"
								:allow-null="false"
								:min="0"
							/>
							<!-- <wd-button
								class="all-btn"
								type="primary"
								size="small"
								:round="false"
								@click="
									() => selectAllNumber(item.allTrapNumber, index, 'trap')
								"
								>选择全部</wd-button
							> -->
						</template>
					</wd-col>
				</wd-row>
			</view>
		</template>
		<template v-else>
			<view class="blank">
				<wd-img :src="blank" class="blank-img" />
				<view class="text">暂无数据</view>
			</view>
		</template>
	</Card>
</template>

<style lang="less" scoped>
@import url("./style/card.less");
@import url("./style/row.less");
@import url("./style/form.less");

.mb-30 {
	margin-bottom: 0px !important;
}

.storage-list-item {
	padding-top: 50px;

	&:not(:last-child) {
		border-bottom: 1px solid rgba(0, 0, 0, 0.35);
	}
}

.blank {
	width: 80%;
	height: 500px;
	margin: 10px auto;
	padding-bottom: 50px;

	.blank-img {
		width: 100%;
		height: 100%;
	}

	.text {
		text-align: center;
		font-size: 35px;
		color: rgba(0, 0, 0, 0.45);
	}
}
</style>
